<div class="clrBr clrP flexVCent gutterH padSm convoHeader" style="height: 50px">
  <div class="flexExpand js-convoProfileHeaderContainer"></div>
  <div class="btnStrip flexNoShrink">
    <a class="ion-android-more-vertical iconBtn subMenuTrigger js-subMenuTrigger"></a>
    <a class="ion-ios-close-empty iconBtn js-closeConvo"></a>
  </div>
</div>
<div class="posR flexExpand">
  <div class="overlay hide js-messagesOverlay"></div>
  <div class="subMenu boxList clrBr clrP clrSh1 hide js-subMenu">
    <a class="clrT" href="<%= ob.guid %>"><%= ob.polyT('chat.conversation.subMenu.viewPage') %></a>
    <a class="clrT js-blockUser"><%= ob.polyT('chat.conversation.subMenu.blockUser') %></a>
    <a class="clrT js-deleteConversation deleteConvoMenuItem"><%= ob.polyT('chat.conversation.subMenu.deleteConvo') %></a>
  </div>
  <div class="convoMessagesWindow tx6 js-convoMessagesWindow">
    <div class="typingIndicator txBase noOverflow clrBr clrP clrT2 clrSh1 js-typingIndicator"><%= ob.typingIndicator %></div>
    <%= ob.spinner() %>
    <%
      const retryLink = `<a class="js-retryLoadMessage">${ob.polyT('chat.conversation.retryLink')}</a>`;
      const loadMessagesError = ob.polyT('chat.conversation.loadMessagesError', { retryLink: retryLink });
    %>
    <div class="clrTErr messagesFetchError js-loadMessagesError <% if (!ob.showLoadMessagesError) print('hide') %>"><%= loadMessagesError %></div>
    <div class="js-convoMessagesContainer"></div>
  </div>
  <div class="emojiMenuContainer clrP clrBr js-emojiMenuContainer"></div>
</div>
<div class="clrBr clrP convoFooter">
  <div class="flexCent">
    <textarea class="clrP tx6 js-inputMessage" placeholder="<%= ob.polyT('chat.conversation.messageInputPlaceholder') %>" maxlength="<%= ob.maxMessageLength %>" rows="1"></textarea>
    <button class="btn clrP emojiMenuTrigger js-emojiMenuTrigger"><%= ob.parseEmojis('😀') %></button>
  </div>
</div>
<div class="overlay clrPOverlay deletingOverlay">
  <div><%= ob.polyT('chat.conversation.deletingOverlayText') %></div>
</div>
<div class="overlay clrPOverlay blockingOverlay">
  <div><%= ob.polyT('chat.conversation.blockingOverlayText') %></div>
</div>